import moment from "moment";
import { useEffect , useRef } from "react"
import { IRouteComponentProps, useDispatch, useSelector } from "umi";
import {HeartOutlined , EyeOutlined ,BranchesOutlined} from '@ant-design/icons';
import {TagOutlined } from '@ant-design/icons';
import Highlight from '../../components/highlight'
import './detail.less'
import { useState } from "react";
const article2:React.FC<IRouteComponentProps>=(props:any)=>{
    const [label,setLabel]=useState(false)
    const taiyang=useSelector(state=>state.index)
    const state=useSelector(state=>state.articles1)
    console.log(state.detail.data && state.detail.data.toc);
    console.log(props.history);
    
    const dispatch = useDispatch()    
    useEffect(() => {
        console.log(props.match.params.id);
        dispatch({
            type:"articles1/bannerListDetail",
            payload:{
                id:props.match.params.id
            }
        })
    }, [])
    return <div className='detail'>
                <div className='content'>
                    {   state.detail.data &&
                        <div className='con'>
                            <img src={state.detail.data.cover} alt="" />
                            <h1>{state.detail.data.title}</h1>
                            <p className='onep'>发布与{moment(state.detail.data.publishAt).format('YYYY-MM-DD hh:mm:s')} · 阅读量 {state.detail.data.views}</p>
                            <Highlight str={state.detail.data.html} />
                                {
                                    state.detail.data.tags[0] &&
                                    <p className='typep' onClick={()=>setLabel(!label)  }>  <TagOutlined />  { state.detail.data.tags[0].label}</p>
                                }
                        </div>
                    }
                    <div className='contentright'>
                        <h3>推荐阅读</h3>
                        <ul className='read'>
                            {
                                state.detailList && state.detailList.map((item:any,index:number)=>{
                                    return <li key={item.id} className={'index'+index} onClick={()=>{
                                        dispatch({
                                            type:"articles1/bannerListDetail",
                                            payload:{
                                                id:item.id
                                            }
                                        })
                                        props.history.push(item.id)
                                    }}>
                                        {item.title} <span className='time'>  ·大约{moment(item.publishAt).fromNow()}</span>
                                    </li>
                                })  
                            }
                        </ul>
                        <h3>目录</h3>
                        <ul className='mul'>
                            {
                                state.detail.data && JSON.parse(state.detail.data.toc).map((item:any,index:number)=>{
                                    return <li key={index} className={item.level==3 ? 'padd':''}>
                                        <a href={'#'+item.id}>{item.text}</a>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
         </div>
    </div>
}
export default article2